<template>
	<view class="main u-page">
		<u-navbar
			title="投诉与建议"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="block">
			<view class="block__content">
				<u--form
					labelPosition="left"
					:model="form"
					ref="form"
				>
					<u-form-item
						label="姓名"
						prop="name"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.name"
							border="none"
							placeholder="你的姓名"
						></u--input>
					</u-form-item>
					<u-form-item
						label="联系电话"
						prop="phone"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.phone"
							border="none"
							placeholder="联系电话"
						></u--input>
					</u-form-item>
					<u-form-item
						label="联系邮箱"
						prop="email"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.email"
							border="none"
							placeholder="联系邮箱"
						></u--input>
					</u-form-item>
					<u-form-item
						label="留言内容"
						prop="content"
						borderBottom
						labelWidth="80"
					>
						<u--textarea
							placeholder="不低于3个字"
							v-model="form.content"
							:maxlength='800'
						></u--textarea>
					</u-form-item>
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js"
	import Tabbar from "@/components/entTabbar"
	import { saveFeedback } from '@/api/form.js'
	import { imgURL } from '@/utils/config'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				form:{
					name: '',
					phone:'',
					email: '',
					content: ''
				},
			}
		},
		onLoad() {
		},
		methods: {
			
			//提交参数
			submit() {
				if (this.form.name == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写您的姓名'
					});
				}	
				if (this.form.phone == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写联系电话'
					});
				}
				
				if (this.form.email == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写邮箱'
					});
				}
				if (this.form.content == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写留言内容'
					});
				}
				saveFeedback(this.form).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.main{
		margin: 50rpx;
		.upload{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx; 
			height:150rpx;
			border: 1px solid #ccc; 
			border-radius: 10rpx;  
		}
		.OrderBtns {
			padding: 10rpx;
			display: flex;
			align-items: center;
			justify-content: start;
			flex-wrap: wrap;
			.btn {
				border: 1px solid #2090FF;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #2090FF;
				margin: 15rpx 8rpx;
				padding: 4rpx 16rpx
			}
		
			.btnActive {
				background: #2090FF;
				color: #fff;
			}
		}
	}
</style>
